import { useState, useEffect } from 'react';
import './index.less';
import { nanoid } from 'nanoid';
import { Button, Modal, Form, Input } from 'antd';
const { TextArea } = Input;
export default function useModal(props) {
  let newArr = props.arr;
  let a = [];
  if (Array.isArray(newArr)) {
    newArr.forEach((i) => {
      a.push({ id: nanoid(), name: i });
    });
  }
  const [state, setState] = useState();
  const [form] = Form.useForm();
  const [arr, setArr] = useState(a);
  const [isModalVisible, setIsModalVisible] = useState(false); // 弹框

  const handleNewRecord = () => {
    //  打开 弹框 事件
    setIsModalVisible(true);
  };
  const handleOk = () => {
    form.validateFields().then((res) => {
      let a = JSON.parse(JSON.stringify(arr));
      a.push({ id: nanoid(), name: res.record });
      props.onChange(a);
      setArr(a);
      setIsModalVisible(false);
      form.resetFields();
    });
  };

  const handleCancel = () => {
    form.resetFields();
    setIsModalVisible(false);
  };

  return (
    <div style={{ padding: '20px' }}>
      {arr.map((item, index) => (
        <div key={item.id} className="arr_all">
          <div className="arr_item">
            <div></div>
            <div> {item.name} </div>
          </div>
          <div
            style={{
              height: '30px',
            }}
          >
            <div
              className={arr.length - 1 === index ? 'line line_last' : 'line'}
            ></div>
          </div>
        </div>
      ))}

      <div className="arr_not_select">
        <div> </div>
        <div>
          {' '}
          <Button onClick={handleNewRecord}>新建记录</Button>{' '}
        </div>
      </div>

      <Modal
        title="新建记录"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form name="basic" form={form} autoComplete="off">
          <Form.Item
            label="记录内容"
            name="record"
            rules={[{ required: true, message: '请输入记录内容' }]}
          >
            {/* <Input placeholder='请输入' /> */}
            <TextArea placeholder="请输入" allowClear maxLength={100} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
